<template>
	<div class="gerenxinxi">
		<div class="touxiang">
			<span>头像：</span>
			<img :src="$store.state.tou">
		</div>
		<div class="xinxi">
			<div class="xinxi1">
				<span>用户名：</span>
				<span>{{$store.state.name}}</span>
				<span>(头像和昵称来自微信同步，暂不支持修改)</span>
			</div>
			<div class="xinxi1">
				<span>账号ID：</span>
				<span>268291</span>
			</div>
			<div class="xinxi2">
				<span>会员权限：</span>
				<span>免费版</span>
				<span @click="open">立即升级</span>
			</div>
			
			<div class="xinxi2">
				<span>会员电话：</span>
				<span v-if="$store.state.phone!=''">{{$store.state.phone}}</span>
				<span v-if="$store.state.phone==''">未绑定</span>
				<span v-if="$store.state.phone==''">立即绑定</span>
				<span v-if="$store.state.phone==''">(绑定手机号后可使用手机号和密码登录)</span>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:"gerenxinxi",
		data(){
			return{
				
			}
		},
		mounted(){

		},
		methods:{
			open() {
				this.$confirm('此功能仅限高级版本使用，请升级后再试', '升级提示', {
				  confirmButtonText: '立即升级',
				  cancelButtonText: '我在想想',
				  type: 'warning',
				}).then(() => {
				 //  this.$message({
					// type: 'success',
					// message: '立即升级!'
				 //  });
				 this.$router.push('/home/'+this.$store.state.luyoushu+'/xufeizhongxin')
				}).catch(() => {
				  this.$message({
					type: 'info',
					message: '好好在想想哟！老表'
				  });          
				});
			 }
		}
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.gerenxinxi{
		
		.touxiang{
			padding: 1rem 0;
			border-bottom:1px solid #E7E7E7 ;
			background-color: #fff;
			padding-left:3rem ;
			
			span{
				float: left;
				display: block;
				color: #999999;
				font-size: 0.4rem;
				margin-top:0.5rem ;
			}
			img{
				margin-left:1rem ;
				float: left;
				width: 1.5rem;
				height: 1.5rem;
				border-radius:50% ;
				vertical-align: middle;
			}
		}
		.touxiang::after{
			content: "";
			display: block;
			clear: both;
		}
		
		.xinxi{
			background-color: #fff;
			
			.xinxi1{
				background-color: #fff;
				padding: 0.8rem 0;
				padding-left:3rem ;
				
				span{
					float: left;
					display: block;
					color: #999999;
					font-size: 0.4rem;
				}
				span:nth-of-type(2){
					margin-left:1rem ;
				}
				span:nth-of-type(3){
					font-size: 0.3rem;
					margin-left:0.1rem ;
					margin-top:0.05rem ;
				}
			}
			.xinxi1::after{
				content: "";
				display: block;
				clear: both;
			}
			
			.xinxi2{
				background-color: #fff;
				padding: 0.8rem 0;
				padding-left:3rem ;
				
				span{
					float: left;
					display: block;
					color: #999999;
					font-size: 0.4rem;
				}
				span:nth-of-type(2){
					margin-left:1rem ;
					color: #333;
				}
				span:nth-of-type(3){
					margin-left:0.6rem ;
					color: #0091FF;
					cursor: pointer;
				}
				span:nth-of-type(4){
					font-size: 0.3rem;
					margin-left:0.1rem ;
					margin-top:0.05rem ;
				}
			}
			.xinxi2::after{
				content: "";
				display: block;
				clear: both;
			}
		}
	}
</style>
